<!DOCTYPE html>
<html>
<head>
<title>Datatable-serverSide 自行封装请求参数和返回数据例子</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../asset/lib/bootstrap-2.3.2/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" href="../asset/lib/bootstrap-2.3.2/css/bootstrap-responsive.min.css" media="screen">
<!-- FontAwesome -->
<link rel="stylesheet" href="../asset/lib/font-awesome-4.2.0/css/font-awesome.min.css">
<!-- DataTables CSS start-->
<link rel="stylesheet" href="../asset/lib/dataTables-1.10.7/plugins/integration/bootstrap/2/dataTables.bootstrap.css">
<link rel="stylesheet" href="../asset/lib/dataTables-1.10.7/plugins/integration/font-awesome/dataTables.fontAwesome.css">
<!-- DataTables CSS end-->

<link rel="stylesheet" href="../asset/css/user-manage.css">
</head>
<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12" id="content">
				<div class="row-fluid">
					<div class="navbar" id="breadcrumb">
						<div class="navbar-inner">
							<ul class="breadcrumb">
								<li>
									<a href="#">首页</a>
									<span class="divider">/</span>
								</li>
								<li class="active">用户管理</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<div class="btn-toolbar">
							<div class="pull-right">
								<div class="input-append">
									<input type="text" placeholder="模糊查询" id="fuzzy-search">
									<div class="btn-group">
										<button type="button" class="btn" id="btn-simple-search"><i class="fa fa-search"></i></button>
										<button type="button" class="btn" title="高级查询" id="toggle-advanced-search">
											<i class="fa fa-angle-double-down"></i>
										</button>
									</div>
								</div>
							</div>
							<button type="button" class="btn btn-primary" id="btn-add"><i class="fa fa-plus"></i> 添加</button>
							<button type="button" class="btn btn-danger" id="btn-del"><i class="fa fa-remove"></i> 批量删除</button>
						</div>
					</div>
				</div>
				<div class="row-fluid" style="display:none;" id="div-advanced-search">
					<form class="form-inline well">
						<span>用户名:</span>
						<input type="text" class="input-medium" placeholder="姓名" id="userName-search">
						<span>登录账号:</span>
						<input type="text" class="input-medium" placeholder="账号" id="loginCode-search">
						<button type="button" class="btn" id="btn-advanced-search"><i class="fa fa-search"></i> 查询</button>
					</form>
				</div>
				<div class="block info-block" id="user-view">
					<div class="navbar navbar-inner block-header">
						<div class="block-title">用户详情</div>
						<div class="header-buttons">
							<button type="button" class="btn btn-primary" id="btn-view-edit">修改</button>
						</div>
					</div>
					<div class="block-content info-content clearfix">
						<div class="row-fluid">
							<div class="span4">
								<label class="prop-name">编号:</label>
								<div class="prop-value" id="id-view"></div>
							</div>
							<div class="span4">
								<label class="prop-name">用户名:</label>
								<div class="prop-value" id="userName-view"></div>
							</div>
							<div class="span4">
								<label class="prop-name">登录账号:</label>
								<div class="prop-value" id="loginCode-view"></div>
							</div>
							<div class="span4">
								<label class="prop-name">状态:</label>
								<div class="prop-value" id="status-view"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="block info-block" id="user-add" style="display:none;">
					<div class="navbar navbar-inner block-header">
						<div class="block-title">添加账户</div>
						<div class="header-buttons">
							<button type="button" class="btn btn-primary" id="btn-save-add">确定添加</button>
							<button type="button" class="btn btn-cancel">取消</button>
						</div>
					</div>
					<div class="block-content info-content clearfix">
						<form id="form-add">
							<div class="control-group">
								<label class="control-label" for="extn-add"><span
									class="red-asterisk">*</span>编号:</label>
								<div class="controls">
									<input type="text" id="id-add" name="extn-add">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="userName-add"><span
									class="red-asterisk">*</span>用户名:</label>
								<div class="controls">
									<input type="text" id="userName-add" name="userName-add">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="status-add">登录账号:</label>
								<div class="controls">
									<input type="text" id="status-add" name="status-add">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="status-add">状态:</label>
								<div class="controls">
									<input type="text" id="status-add" name="status-add">
								</div>
							</div>
						</form>
					</div>
				</div>
				<div class="block info-block" id="user-edit" style="display:none;">
					<div class="navbar navbar-inner block-header">
						<div class="block-title">修改账户:<span id="title-edit"></span></div>
						<div class="header-buttons">
							<button type="button" class="btn btn-primary" id="btn-save-edit">保存更改</button>
							<button type="button" class="btn btn-cancel">取消</button>
						</div>
					</div>
					<div class="block-content info-content clearfix">
						<form id="form-edit">
							<div class="control-group">
								<label class="control-label" for="id-edit"><span
									class="red-asterisk">*</span>编号:</label>
								<div class="controls">
									<input type="text" id="id-edit" name="id-edit">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="userName-edit"><span
									class="red-asterisk">*</span>用户名:</label>
								<div class="controls">
									<input type="text" id="userName-edit" name="userName-edit">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="loginCode-edit">登录账号:</label>
								<div class="controls">
									<input type="text" id="loginCode-edit" name="loginCode-edit">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="status-edit">状态:</label>
								<div class="controls">
									<input type="text" id="status-edit" name="status-edit">
								</div>
							</div>
						</form>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12" id="div-table-container">
						<table class="table table-striped table-bordered table-hover table-condensed" id="table-user" cellspacing="0" width="100%">
							<thead>
								<tr>
									<th>
										<input type="checkbox" name="cb-check-all">
									</th>
									<th>用户名</th>
									<th>登录账号</th>
									<th>状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
							<tfoot>
								<tr>
									<th>
										<input type="checkbox" name="cb-check-all">
									</th>
									<th>用户名</th>
									<th>登录账号</th>
									<th>状态</th>
									<th>操作</th>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../asset/lib/json2.js"></script>
	<!-- JQuery -->
	<script src="../asset/lib/jquery-1.11.3.min.js"></script>
	<!-- Bootstrap -->
	<script src="../asset/lib/bootstrap-2.3.2/js/bootstrap.min.js"></script>
	<!-- SpinJS-->
	<script src="../asset/lib/spin-2.1.0/jquery.spin.merge.js"></script>
	<!-- lhgdialog -->
	<script src="../asset/lib/lhgdialog-4.2.0/lhgdialog.js?skin=bootstrap2"></script>
	<!-- DataTables JS-->
	<script src="../asset/lib/dataTables-1.10.7/media/js/jquery.dataTables.js"></script>
	<script src="../asset/lib/dataTables-1.10.7/plugins/integration/bootstrap/2/dataTables.bootstrap.js"></script>
	<!-- DataTables JS end-->
	<script src="../asset/js/constant.js"></script>
	<script src="../asset/js/user-manage.js"></script>
</body>
</html>